<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--
`core-header-panel` contains a header section and a content panel section.

__Important:__ The `core-header-panel` will not display if its parent does not have a height.

Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-attrs.html), you can easily make the `core-header-panel` fill the screen

    <body fullbleed layout vertical>
      <core-header-panel flex>
        <core-toolbar>
          <div>Hello World!</div>
        </core-toolbar>
      </core-header-panel>
    </body>

or, if you would prefer to do it in CSS, just give `html`, `body`, and `core-header-panel` a height of 100%:

    html, body {
      height: 100%;
      margin: 0;
    }
    core-header-panel {
      height: 100%;
    }

Special support is provided for scrolling modes when one uses a core-toolbar or equivalent
for the header section.

Example:

    <core-header-panel>
      <core-toolbar>Header</core-toolbar>
      <div>Content goes here...</div>
    </core-header-panel>

If you want to use other than `core-toolbar` for the header, add
`core-header` class to that element.

Example:

    <core-header-panel>
      <div class="core-header">Header</div>
      <div>Content goes here...</div>
    </core-header-panel>

To have the content fits to the main area, use `fit` attribute.

    <core-header-panel>
      <div class="core-header">standard</div>
      <div class="content" fit>content fits 100% below the header</div>
    </core-header-panel>

Use `mode` to control the header and scrolling behavior.

@group Polymer Core Elements
@element core-header-panel
@homepage github.io
-->

<link rel="import" href="../polymer/polymer.html">

<polymer-element name="core-header-panel">
<template>

  <link rel="stylesheet" href="core-header-panel.css">

  <div id="outerContainer" vertical layout>

    <content id="headerContent" select="core-toolbar, .core-header"></content>

    <div id="mainPanel" flex vertical layout>

      <div id="mainContainer" flex?="{{mode !== 'cover'}}">
        <content id="mainContent" select="*"></content>
      </div>

      <div id="dropShadow"></div>

    </div>

  </div>

</template>
<script src="core-header-panel.js"></script>
</polymer-element>
